<template>
  <div style="height:100%">
    <div style="height:100%">
      <div style="color:#fff;font-size:1.6rem;margin-bottom:3.8%">年龄分布</div>
      <div style="width:90%;height:80%;margin:0 auto">
        <Echart :echartObj="echartObj" />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import Echart from '@/components/echarts/index.vue'
export default {
  components: {
    Echart
  },
  props: ['ageStatistics'],
  data() {
    return {
      echartObj: {},
      dataXAxis: [],
      dataYAxis: []
    }
  },
  watch: {
    ageStatistics: {
      handler(val, oldVal) {
        if (val.length>0) {
          let max = 0
          val.forEach((res) => {
            this.dataXAxis.push(res.name)
            this.dataYAxis.push(res.value)
            if (res.value > max) {
              max = res.value
            }
          })
          // console.log(Math.ceil(max/10));

          max = (Math.ceil(max / 10) + 1) * 10
          // console.log(max);

          this.echartObj = {
            grid: {
              left: 0,
              top: '5%',
              bottom: '2%',
              right: 0,
              containLabel: true
            },
            xAxis: {
              data: this.dataXAxis,
              axisLabel: {
                //   inside: true,
                textStyle: {
                  color: '#fff'
                }
              },
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                show: false
              }
            },
            yAxis: {
              max: max,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                textStyle: {
                  color: '#999'
                }
              }
            },

            series: [
              {
                type: 'bar',
                label: {
                  show: true,
                  position: 'top',
                  color: '#fff'
                },
                barWidth: '20%',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                  ])
                },
                emphasis: {
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#2378f7' },
                      { offset: 0.7, color: '#2378f7' },
                      { offset: 1, color: '#83bff6' }
                    ])
                  }
                },
                data: this.dataYAxis
              }
            ]
          }
        }
      },
      // 配置立即执行属性
      immediate: true
    }
  }
}
</script>

<style scoped>
</style>